<template>
  <view class="container">
    <view class="input-box">
      <textarea
        v-model="content"
        maxlength="140"
        placeholder="请输入内容，比如您这一刻的想法……"
      ></textarea>
      <text class="char-count">{{ content.length }}/140</text>
    </view>
    <view class="image-box">
      <button @click="chooseImage">
        <image src="/static/images/upload.png" class="upload-icon"></image>
      </button>
      <view class="image-preview" v-for="(image, index) in images" :key="index">
        <image :src="image" mode="aspectFill"></image>
        <button @tap="removeImage(index)">x</button>
        <!-- <image src="/static/images/x.png"></image> -->
      </view>
    </view>
    <button class="save-button" @tap="save">保存</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')
const images = ref([])
const cameraIcon = '/static/camera.png'

const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    success: (res) => {
      images.value = images.value.concat(res.tempFilePaths)
    },
  })
}

const removeImage = (index) => {
  images.value.splice(index, 1)
}

const save = () => {
  console.log('Content:', content.value)
  console.log('Images:', images.value)
}
</script>
<style scoped>
.container {
  padding: 20px;
}

.input-box textarea {
  width: 100%;
  height: 120px;
}

.char-count {
  display: block;
  text-align: right;
  margin-top: 5px;
}

.upload-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.image-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.image-box button {
  width: 80px;
  height: 80px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview {
  position: relative;
}

.image-preview image {
  width: 80px;
  height: 80px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.image-preview button {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* 圆形 */
  background-color: #6f6d6d;
  /* 背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
  border: 3px solid white;
  color: white;
}

.save-button {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background-color: #0f84d8;
  color: white;
  border: none;
  border-radius: 15px;
  text-align: center;
  margin-top: 25px;
  box-sizing: border-box;
}
</style>
